<template>
  <popupBox
    :title="details[showIndex].title"
    v-show="show"
    @closePopup="()=>{$emit('closePopup');videoShow=false}"
  >
    <template v-slot:container>
      <p class="danger">
        <span>等级：</span>
        {{ level }}
      </p>
      <p>
        <span>时间：</span>
        {{ details[showIndex].time }}
      </p>
      <p>
        <span>地点：</span>
        {{ details[showIndex].address }}
        <svg
          t="1627543147974"
          class="icon"
          viewBox="0 0 1024 1024"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          p-id="2040"
          width="16"
          height="16"
          style="margin-left: 5px; cursor: pointer"
        >
          <path
            d="M416.00006 0.00064C186.368204-0.06336 0.12832 183.104526 0.00032 409.216384c0 226.047859 326.015796 571.903643 326.015796 571.903643 49.727969 57.087964 131.071918 57.343964 180.223888-0.256 0 0 325.759796-345.599784 325.759796-571.647643a406.207746 406.207746 0 0 0-121.919924-289.471819A419.071738 419.071738 0 0 0 416.00006 0.00064z m0 585.407634A192.44788 192.44788 0 0 1 238.208171 468.480347a187.327883 187.327883 0 0 1 41.791974-206.463871 194.559878 194.559878 0 0 1 209.727869-40.959974A189.439882 189.439882 0 0 1 608.38394 396.160392C608.31994 500.736327 522.239994 585.408274 416.00006 585.408274z"
            p-id="2041"
            fill="#1296db"
          ></path>
        </svg>
      </p>
      <div class="btns">
        <button class="btn" @click="videoShow = !videoShow">历史回放</button>
        <button v-if="details[showIndex].status === 0" class="btn" @click="handleAlarm">处理</button>
        <button class="btn" @click="()=>{$emit('toPrev');videoShow=false}">上一条</button>
        <button class="btn" @click="()=>{$emit('toNext');videoShow=false}">下一条</button>
      </div>
      <div class="videos">
        <img :src="details[showIndex].image" alt="" />
        <rtmp class="rtmp" :id="'video'" v-if="videoShow" :src="videoUrl" />
      </div>
    </template>
  </popupBox>
</template>

<script>
import rtmp from '@/components/rtmp.vue'
import popupBox from '@/components/popup_slot'
import API, { alamCenterApi } from '@/api'
import moment from 'moment'
export default {
  name: 'area-warn',
  components: {
    popupBox,
    rtmp
  },
  props: {
    details: {
      type: Array,
      required: true
    },
    show: {
      type: Boolean,
      required: true
    },
    showIndex: {
      type: Number,
      required: true
    }
  },
  data () {
    return {
      videoShow: false,
      videoUrl: ''
    }
  },
  computed: {
    level () {
      let status = '未设置'
      switch (this.details[this.showIndex].level) {
        case 0:
          status = '一般'
          break
        case 1:
          status = '普通'
          break
        case 2:
          status = '严重'
          break
      }
      return status
    }
  },
  methods: {
    async handleAlarm () {
      const { details, showIndex } = this
      let confirm = ''
      if (details[showIndex].level === 2) {
        confirm = await this.$alert(`<div class="form-item">
          <div class="label">分组名称:</div>
          <input class="checkbox" type="checkbox" checked disabled>领导组</input>
        </div>
        <div class="form-item">
          <input class="checkbox" type="checkbox" checked disabled>通知分组成员</input>
        </div>
        `, '处理确认', {
          dangerouslyUseHTMLString: true
        })
      }
      confirm === 'confirm' && this.$emit('sendHandleMsg', details[showIndex])
      this.$emit('handleAlarm', details[showIndex])
    },
    async getUrl () {
      const timer = moment(this.details[this.showIndex].happenTime).unix() * 1000
      const cameraIndexCode = this.details[this.showIndex].srcParentIndex
      const res = await API(alamCenterApi.VIDEO_BACK, {
        cameraIndexCode,
        beginTime: moment(timer - 10000).format('YYYY-MM-DDTHH:mm:ss.000Z'),
        endTime: moment(timer).format('YYYY-MM-DDTHH:mm:ss.000Z')
      })
      this.videoUrl = res.data.url
      // console.log(this.videoUrl)
    }
  },
  watch: {
    show (v) {
      if (v) {
        this.getUrl()
      }
    }
  }
}
</script>

<style lang="scss" scoped>
p {
  padding-left: 40px;
  margin: 0;
  margin-bottom: 24px;
  span {
    color: rgb(192, 193, 195);
  }
}
.danger {
  color: red;
}
.btns {
  padding-left: 40px;
  margin-bottom: 24px;
  .btn {
    margin-right: 20px;
    color: rgb(188, 191, 197);
    font-size: 12px;
    width: 150px;
    height: 60px;
    border: 0;
    background-color: rgb(2, 72, 142);
    cursor: pointer;
  }
}

.videos {
  position: relative;
  width: 100%;
  border-radius: 15px;
  height: 489px;
  img {
    width: 100%;
    display: block;
  }
  .rtmp {
    position: absolute;
    top: 0;
  }
}
</style>
